<div [hidden]="hideAll !== 0" class="display-flex chat-container flex-1">
    <div class="chat-list">
        <conversation-list-component [conversationList]="conversationList" [active]="active" (conversationToTop)="conversationToTopEmit($event)" (changeActive)="selectTargetEmit($event)" (deleteConversationItem)="deleteConversationItemEmit($event)"></conversation-list-component>   
    </div>
    <div class="chat-conversation flex-1">
        <default-panel-component [hidden]="!defaultPanelIsShow"></default-panel-component>        
        <chat-panel-component [changeActiveScrollBottom]="changeActiveScrollBottom" [otherOptionScrollBottom]="otherOptionScrollBottom" [hidden]="defaultPanelIsShow" [selfInfo]="selfInfo" [messageList]="messageList" [active]="active" (loadMore)="loadMoreEmit($event)" (businessCardSend)="businessCardSendEmit($event)" (videoPlay)="playVideoEmit($event)" (sendMsg)="sendMsgEmit($event)" (sendPic)="sendPicEmit($event)" (sendFile)="sendFileEmit($event)" (sendLocation)="sendLocationEmit($event)" (saveDraft) ="saveDraftEmit($event)" (otherInfo)="watchOtherInfoEmit($event)" (selfInfoEmit)="watchSelfInfoEmit()" (groupSetting)="groupSettingEmit()" (addGroup)="addGroupEmit()" (msgTransmit)="msgTransmitEmit($event)" (retract)="msgRetractEmit($event)" (inputMessage)="inputMessageEmit($event)"></chat-panel-component>         
        <group-setting-component [groupSetting]="groupSetting" (keepSilence)="keepSilenceEmit($event)" (closeGroupSetting)="closeGroupSettingEmit()" (exitGroup)="exitGroupEmit($event)" (modifyGroupDescription)="modifyGroupDescriptionEmit()" (addMember)="addMemberEmit()" (watchOtherInfo)="watchOtherInfoEmit($event)" (watchSelfInfo)="watchSelfInfoEmit()" (deleteMember)="deleteMemberEmit($event)" (modifyGroupName)="modifyGroupNameEmit($event)" (updateGroupAvatar)="updateGroupAvatarEmit($event)"></group-setting-component>        
    </div>
</div>
<video-component *ngIf="playVideoShow.show" [url]="playVideoShow.url" (closeVideo)="closeVideoEmit()"></video-component>
<unread-list-component *ngIf="unreadList.show" [unreadList]="unreadList" (readListOtherInfo)="readListOtherInfoEmit($event)"></unread-list-component>
<other-info-component *ngIf="otherInfo.show" [changeOtherInfoFlag]="changeOtherInfoFlag" [otherInfo]="otherInfo" (verifyUserBtn)="verifyUserBtnEmit($event)" (addFriend)="addFriendEmit($event)" (isShow)="OtherInfoEmit($event)" (changeSingleBlack)="changeSingleBlackEmit($event)" (changeSingleNoDisturb)="changeSingleNoDisturbEmit($event)" (saveMemoName)="saveMemoNameEmit($event)" (deleteFriend)="deleteFriendEmit($event)" (sendCard)="sendCardEmit($event)"></other-info-component>
<group-description-component *ngIf="groupDescription.show && hideAll === 0" [description]="groupDescription.description" (updateGroupInfo)="updateGroupInfoEmit($event)"></group-description-component>
<message-transmit-component [messageTransmit]="messageTransmit" *ngIf="messageTransmit.show" (confirmTransmit)="confirmTransmitEmit($event)" (searchMessageTransmit)="searchMessageTransmitEmit($event)"></message-transmit-component>
<verify-modal-component *ngIf="verifyModal.show" (verifyModalBtn)="verifyModalBtnEmit($event)" [verifyModal]="verifyModal"></verify-modal-component>
<group-avatar-component *ngIf="groupAvatar.show" [groupAvatarInfo]="groupAvatar" (groupAvatar)="groupAvatarEmit($event)"></group-avatar-component>
<div *ngIf="!isLoaded && hideAll === 0" class="modal-shadow chat-loading">
    <img src="../../../assets/images/app-loading.gif" alt="">
</div>